<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/elementUI.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
                prop="title"
                label="标题"
                sortable
                width="180">
        </el-table-column>
        <el-table-column
                prop="level"
                label="任务等级"
                sortable
                width="180">
        </el-table-column>
        <el-table-column
                prop="content"
                label="任务介绍">
        </el-table-column>

        <el-table-column
                label="负责人">
            <template slot-scope="scope">
                {{scope.row.director.username}}
            </template>
        </el-table-column>
        <el-table-column
                label="操作">

            <template slot-scope="scope">
                <el-button @click="handleAdd(scope.row.id)">+</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="任务详情" :visible.sync="dialogFormVisible">


        <el-transfer
                v-model="ids"
                :titles="['可选任务', '已选任务']"
                :props="{
                          key: 'id',
                          label: 'title'
                        }"
                :data="taskList">
        </el-transfer>


        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addChildrenTask">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            dialogFormVisible:false,
            taskList:[],
            ids:[],
            pid:""
        },
        methods: {
            addChildrenTask(){
                axios.get(`/task/addChildrenTask?pid=${this.pid}&ids=${this.ids}`).then(res=>{
                    this.findTreeData();
                    this.dialogFormVisible = false;
                })
            },
            findTaskList(id){
                axios.get(`/task/findAll?id=${id}`).then(res=>{
                    this.taskList = res.data;
                })
            },
            findTaskChildren(id){
                // 已经是我在孩子的任务
                axios.get(`/task/findTaskChildren?pid=${id}`).then(res=>{
                    this.ids = res.data;
                })
            },
            handleAdd(id){
                this.pid = id;
                this.dialogFormVisible = true;
                this.findTaskList(id);
                this.findTaskChildren(id);
            },
            findTreeData() {
                axios.get("/task/treeData").then(res => {
                    this.tableData = res.data;
                })
            }
        },
        created() {
            this.findTreeData();
        }
    })
</script>
</body>
</html>